import { Component } from 'react';

import { Boxs, ScrollList, Avatar} from 'saltui';
const { HBox, Box } = Boxs;
import {URLS,nodataIcon} from '../../../../app/variables';
import './PageHome.less';

const Item  =  React.createClass({
  render:function() {
    let token = getLoginUserInfo().token;
    var context = document.getElementById("officeContext").value;
    let url =  context + '/dingisv/api/common/viewImage?fid=';
    return <div>
      <HBox vAlign="center" className="dd-bottom-border t-PT20 t-PB20 t-BCf t-PL16 t-PR16">
          <HBox flex={1} vAlign="center">
            {this.props.ranking == 1 ? 
              <Box className="t-MR8  t-FCddfontblue-60">
                <svg className="icon t-FS10" ariaHidden="true">
                  <use xlinkHref="#icon-first"></use>
                </svg>
              </Box> :
              this.props.ranking == 2 ? 
              <Box className="t-MR8  t-FCddfontblue-60">
                <svg className="icon t-FS10" ariaHidden="true">
                  <use xlinkHref="#icon-second"></use>
                </svg>
              </Box> :
              this.props.ranking == 3 ? 
              <Box className="t-MR8  t-FCddfontblue-60">
                <svg className="icon t-FS10" ariaHidden="true">
                  <use xlinkHref="#icon-third"></use>
                </svg>
              </Box> :
              <Box className="t-MR10 t-FS12 t-ML4 t-WH20 t-R2 t-BCgreyblue-20 t-FCf t-FAC" style={{lineHeight:"20px"}}>
                {this.props.ranking}
              </Box>
            }
            
            <Box className="t-MR10 t-R50 t-OFH">
            {this.props.image == '' ? 
              <Avatar name={this.props.userName} size={50}/>
              :
              <Avatar src={url + this.props.image+'&token='+token} size={50}/>
            }
            </Box>
            <Box>
              <Box className="t-FS16 t-MB6">{this.props.userName}</Box>
              <Box className="t-FS14 t-FCddfontblue-40">{this.props.orgName}</Box>
            </Box>
          </HBox>          
          <HBox style={{ alignItems:"baseline"}} className="t-FS14">
            <Box style={{color:"#f14a4a"}} className="t-FS20  t-MR2"><b>{this.props.grade}</b></Box>
            <Box>分</Box>
          </HBox>
        </HBox>
    </div>;
  }
});

export default class PageHome extends Component {

 constructor(props) {
    super(props);
    let winHeight = getScrollHigh(0,0,0);
    let id = this.props.params.id;
    this.state = {
      winHeight:winHeight,
      id:id
    };
    setTitle('考试排名');    
  }

  //分页列表请求前
  beforeFetch(data,form){
    data.quesId = this.state.id;
    return data;
  }

  render() {
    let winHeightStyle = {height: this.state.winHeight};
    return (
      <div style={winHeightStyle}>
        <ScrollList
          url={URLS.getRankingList}
          dataType="json"
          pageSize={10}
          beforeFetch={this.beforeFetch.bind(this)}
          noDataTip="暂无数据"
          ref = 'rankingList_ref'
          noDataImage={nodataIcon}
          currentPageKey="page"
          >
          <Item />
        </ScrollList>
      </div>
      );
    }
}



